<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name=viewport
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>视频播放器</title>
    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../else/fav.ico" />
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/layui.css">
    <script src="../js/jQuery.js"></script>
    <script src="../js/layui.js"></script>
</head>

<body style="background-color: #141414;">
    <div id="mse"></div>
    <div id="video-player">
        <div id="player-name">魁拔</div>
        <div id="player-sum">全七集</div>
        <div id="player-num"></div>
    </div>
    <script src="https://unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" charset="utf-8"></script>
    <script>
        try {
            const mvsrc = window.sessionStorage.getItem("movie_src");
            document.title = window.sessionStorage.getItem("movieName");
            let src = window.sessionStorage.getItem("playerHover") == null ? mvsrc.split(",")[0].split("|")[1] : mvsrc.split(",")[window.sessionStorage.getItem("playerHover")].split("|")[1];
            let playerNum = window.sessionStorage.getItem("playerHover") == null ? "0" : window.sessionStorage.getItem("playerHover");
            for (let i = 0; i < mvsrc.split(",").length; i++) {
                $("#player-num").append(`<a href='JavaScript:;'>${i + 1}</a>`);
            }
            $("#player-num a").removeClass("hover");
            $("#player-num a").eq(playerNum).addClass("hover");
            $("#player-name").text(window.sessionStorage.getItem("movieName"));
            $("#player-sum").text(window.sessionStorage.getItem("movie_figure"));
            $("#player-num").on("click", "a", function () {
                let index = $("#player-num a").index(this);
                window.sessionStorage.setItem("playerHover", index);
                $("#player-num a").removeClass("hover");
                $("#player-num a").eq(index).addClass("hover");
                location.reload();
            })
            let player = new Player({
                id: 'mse',
                volume: 0.3,
                url: `${src}`,
                // poster: "",
                playsinline: true,
                height: "70vh",
                width: "70%",
                playbackRate: [0.5, 0.75, 1.0, 1.5, 2.0, 2.5, 3.0], //传入倍速可选数组
                defaultPlaybackRate: 1, //默认倍速
                pip: true, //打开画中画
                volume: 1, //默认打开的音量
                autoplay: true, //自动播放
                loop: false, //循环播放
                lastPlayTime: 0, //视频起播时间（单位：秒）
                lastPlayTimeHideDelay: 0, //提示文字展示时长（单位：秒）
                rotate: {   //视频旋转按钮配置项
                    innerRotate: true, //只旋转内部video
                    clockwise: false // 旋转方向是否为顺时针
                },
                // rotateFullscreen: true, //适配横屏 注:电脑横屏会反转
                download: true, //视频下载
                cssFullscreen: true, //只在当前页面全屏
                screenShot: { //截图
                    saveImg: true,
                    quality: 0.92,
                    type: 'image/png',
                    format: '.jpg'
                },
                controls: true, //组件开关
            });
        } catch {
            document.title = "视频播放器加载失败";
        }
    </script>
</body>

</html>